<template>
  <div class="detail">
    <van-nav-bar title="搜索" left-arrow @click-left="onClickLeft">
      <template>
        <van-icon name="share-o" size="18" />
      </template>
    </van-nav-bar>
    <van-search
      v-model="songName"
      shape="round"
      placeholder="请输入关键字"
      type="text"
      @keyup.enter="toSearch"
    ></van-search>
    <ul class="searchList">
      <li v-for="item in mylist" :key="item.id" @click="toPlay(item.id)">
        {{ item.name }}-{{ item.artists[0].name }}
      </li>
    </ul>
    <!-- <audio controls :src="playUrl"></audio> -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      mylist: [],
      songName: "",
      playUrl: "",
    };
  },
  methods: {
    toSearch() {
      axios
        .get("http://localhost:3000/search?keywords=" + this.songName)
        .then((res) => {
          this.mylist = res.data.result.songs;
          // console.log(res.data.result.songs[0].artists[0].name);
        });
    },
    toPlay(id) {
      localStorage.setItem("singleId", id);
      this.$router.push({
        name: "Play",
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {},
  computed: {
    list() {
      let res = [];
      let newname = this.name;
      this.mylist.forEach(function(item) {
        if (item.indexOf(newname) != -1) {
          res.push(item);
        }
      });
      return res;
    },
  },
};
</script>

<style>
.searchList {
  width: 90%;
  margin: auto;
  border-radius: 10px;
  color: #000;
}
.searchList li {
  box-shadow: 0 1px 2px #ccc;
  line-height: 40px;
  padding-left: 10px;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 1s;
  margin: 5px 0;
}
.searchList li:hover {
  background: #ccc;
}
.van-nav-bar .van-icon {
  color: red !important;
}
</style>
